<template>
  <div class="rankin">
    <ul class="more_ul">
      <li class="more_li" v-for="(top250,index) in subject_top250" :key="index">
        <a @click="particu(top250.id,top250.original_title)">
          <img class="moreImg" :src="top250.images.large" alt="海报">
          <div class="title_name">
            <h5>{{top250.original_title}}</h5>
            <!--数组长度为5，共5次循环显示5颗星星-->
            <div class="stars">
              <!-- 全黄星星 -->
              <img
                class="stars_img"
                src="/static/images/star_fill_whole.png"
                v-if="top250.rating.average>=index+1"
              >
              <!-- 半黄星星 -->
              <img
                class="stars_img"
                src="/static/images/star_fill_half.png"
                v-if="top250.rating.average>=index && top250.rating.average%10!=0"
              >
              <!-- 全灰星星 -->
              <img class="stars_img" src="/static/images/star_fill_none.png" v-else>
              <span class="stars_sp" v-if="top250.rating.average==0">暂无评分</span>
              <span class="stars_sp" v-else>{{top250.rating.average}}</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
var httpUtil = require("../../utils/request.js");
import { mapGetters } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
      start: 0,
      totalCount: 0, //已请求的电影数量
      allMovies: [] //全部电影信息
    };
  },
  onReachBottom: function() {
    // 显示加载图标
    wx.showLoading({
      title: "玩命加载中",
      mask: true
    });
    // wx.stopPullDownRefresh();
    if (this.start < 250) {
      this.start += 20;
    } else {
      wx.showToast({
        title: "没有更多了",
        image: "/static/images/crying_face.png",
        duration: 2000
      });
    }
    this.$store
      .dispatch("refresh", this.start)
      .then(data => {
        let list = this.subject_top250;
        if (data.subjects.length > 0) {
          data.subjects.forEach(item => {
            list.push(item);
          });
        }
        this.$store.commit("SET_SUBJECTS_TOP250", list);
        // 隐藏加载框
        wx.hideLoading();
      })
      .catch(error => {
        console.log("请求失败：" + error);
      });
  },
  watch: {},
  computed: {
    ...mapGetters(["subject_top250"])
  },
  methods: {
    particu(id, title) {
      wx.navigateTo({ url: "/pages/details/main?id=" + id + "&title=" + title });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
.rankin {
  width: 100%;
  height: 100%;
}
.more_li {
  float: left;
  width: 25%;
  height: 380rpx;
  padding: 30rpx 4.1% 0rpx 4.1%;
}
.moreImg {
  width: 100%;
  height: 260rpx;
}
/* 影片名称 */
.title_name h5 {
  width: 170rpx;
  font-size: 24rpx;
  color: #000000;
  font-weight: bold;
  margin: 10rpx 0 5rpx 0;
  overflow: hidden; /*内容超出后隐藏*/
  text-overflow: ellipsis; /* 超出内容显示为省略号*/
  white-space: nowrap; /*文本不进行换行*/
}
.stars {
  height: 40rpx;
  display: flex;
  align-items: center;
}
.stars_sp {
  font-size: 20rpx;
  margin-left: 10rpx;
}
.stars_img {
  width: 25rpx !important;
  height: 25rpx !important;
}
</style>